<template>
    <div class="enter-work-account">
        <div class="account-content">
            <div class="account-header">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="企业资料" name="enterpriseWorkAccountBase"></el-tab-pane>
                    <el-tab-pane label="企业认证" name="enterpriseWorkAccountApprove"></el-tab-pane>
                    <el-tab-pane label="账号安全" name="enterpriseWorkAccountSafe"></el-tab-pane>
                    <el-tab-pane label="我的消息" name="enterpriseWorkAccountMsg"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="account-content-view">
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'enterpriseWorkAccount',
    components: {},
    data() {
        return {
            activeName: 'enterpriseWorkAccountBase'
        }
    },
    watch: {
        activeName(val) {
            if (val) {
                this.$router.push({ name: val })
            }
        },
        $route(route) {
            // this.activeName = route.name
            this.init()
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let routeName = this.$route.name
            if (routeName === 'enterpriseWorkAccount') {
                this.activeName = 'enterpriseWorkAccountBase'
            } else {
                this.activeName = routeName
            }
            this.$router.push({ name: this.activeName })
        }
    }
}
</script>
<style lang="scss" scoped="scoped">
.enter-work-account {
    background: #FFF;
    padding: 10px 20px;

    .account-content {
        position: relative;

        .account-actions {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
</style>
